import { h, render } from 'vue';
import { ElNotification, ElDialog, ElButton } from 'element-plus';

// 弹窗容器单例
let detailDialogVm: { el: HTMLDivElement } | null = null;

// 弹窗显示详情
function showDetailDialog(title: string, content: string) {
  if (detailDialogVm) {
    document.body.removeChild(detailDialogVm.el);
    detailDialogVm = null;
  }
  const container = document.createElement('div');
  document.body.appendChild(container);
  const vnode = h(
    ElDialog,
    {
      modelValue: true,
      'onUpdate:modelValue': (val: boolean) => {
        if (!val) {
          render(null, container);
          document.body.removeChild(container);
          detailDialogVm = null;
        }
      },
      title,
      width: '400px',
      closeOnClickModal: true,
      closeOnPressEscape: true,
      appendToBody: true,
      customClass: 'notification-detail-dialog'
    },
    {
      default: () => [h('div', { style: 'white-space: pre-wrap;word-break: break-all;' }, content)]
    }
  );
  render(vnode, container);
  detailDialogVm = { el: container };
}

function truncateContent(content: string, maxLength = 40) {
  if (!content) return '';
  return content.length > maxLength ? `${content.slice(0, maxLength)}...` : content;
}

// 获取当前时间字符串
function getTimeString() {
  const now = new Date();
  return now.toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit'
  });
}

export function showNotification({
  title = '消息通知',
  content = '',
  type = 'info',
  duration = 4000,
  showDetail = true,
  maxLength = 40
}: {
  title?: string;
  content: string;
  type?: 'info' | 'success' | 'warning' | 'error';
  duration?: number;
  showDetail?: boolean;
  maxLength?: number;
}) {
  // 选择icon颜色
  const typeColor = {
    info: '#409EFF',
    success: '#67C23A',
    warning: '#E6A23C',
    error: '#F56C6C'
  };
  const icon = h(
    'span',
    {
      style: `display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:${typeColor[type]};color:#fff;font-size:18px;margin-right:14px;box-shadow:0 2px 8px #0001;`
    },
    type === 'success' ? '✔' : type === 'warning' ? '!' : type === 'error' ? '✖' : 'ℹ'
  );

  const timeStr = getTimeString();

  const mainContent = h(
    'div',
    {
      style:
        'font-size:15px;color:#222;font-weight:500;line-height:1.5;word-break:break-all;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'
    },
    truncateContent(content, maxLength)
  );

  const timeContent = h(
    'div',
    { style: 'font-size:12px;color:#aaa;margin-top:2px;letter-spacing:1px;' },
    timeStr
  );

  const detailBtn =
    showDetail && content.length > maxLength
      ? h(
          ElButton,
          {
            type: 'primary',
            size: 'small',
            link: true,
            style: 'margin-left: 8px;padding:0 4px;font-size:13px;',
            onClick: () => showDetailDialog(title, content)
          },
          { default: () => '查看详情' }
        )
      : null;

  const messageVNode = h(
    'div',
    {
      style:
        'display:flex;align-items:center;background:#fff;border-radius:10px;box-shadow:0 2px 8px #0001;padding:8px 4px 8px 0;min-width:0;'
    },
    [
      icon,
      h('div', { style: 'flex:1;min-width:0;' }, [
        mainContent,
        h('div', { style: 'display:flex;align-items:center;gap:8px;' }, [timeContent, detailBtn])
      ])
    ]
  );

  ElNotification({
    title,
    message: messageVNode,
    type,
    duration
  });
}
